<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="page/breastmilk/css/breastmilkSetList.css" />
    <style>
        .wrapper .content {
            padding: 20px;
        }
        .el-table--border, .el-table--group {
            border: 1px solid #ddd;
        }
        .el-table td, .el-table th.is-leaf {
            border-bottom: 1px solid #ddd;   
        }
        .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #ddd;
        }
        .el-table--enable-row-transition .el-table__body td {
            padding: 4px 0;
        }
        .el-tooltip__popper {
            max-width: 500px;
        }
    </style>
</head>
<body>
    <div class="wrapper" id="root">
        <div class="title">发送历史</div>
        <div class="ctrl">
            <el-row>
                <el-col :span="4">
                    <span class="key">宝宝姓名</span>
                    <el-input v-model="search.name" size="small" style="width: calc(100% - 100px)" placeholder="请输入姓名" />
                </el-col>
                <el-col :span="4">
                    <span class="key">住院号</span>
                    <el-input v-model="search.hospitalNo" size="small" style="width: calc(100% - 100px)" placeholder="请输入姓名" />
                </el-col>
                <el-col :span="4">
                    <span class="key">床号</span>
                    <el-input v-model="search.bedNo" size="small" style="width: calc(100% - 100px)" placeholder="请输入床号" />
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="4">
                    <span class="key">联系方式</span>
                    <el-input v-model="search.phone" size="small" style="width: calc(100% - 100px)" placeholder="请输入姓名" />
                </el-col>
                <el-col :span="4">
                    <span class="key">通知日期</span>
                    <el-date-picker
                        style="width: calc(100% - 100px); max-width: 220px;"
                        v-model="search.date"
                        type="date"
                        size="small"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="5">
                    <span class="key">医院病区</span>
                    <el-select v-model="search.wardNo" size="small" style="width: 150px;">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option label="2w" value="2w"></el-option>
                        <el-option label="3w" value="3w"></el-option>
                        <el-option label="7w" value="7w"></el-option>
                        <el-option label="15w" value="15w"></el-option>
                        <el-option label="16w" value="16w"></el-option>
                        <el-option label="22w" value="22w"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" size="small" @click="handleSearch" :loading="search.loading">搜索</el-button>
                </el-col>
            </el-row>
        </div>

        <div class="content" style="margin-top: 50px">
            <el-table :data="table.data" ref="data" v-loading="table.loading" border element-loading-text="加载中...">
                <el-table-column label="序号" align="center" prop="No" width="50px"></el-table-column>
                <el-table-column label="床号" align="center" prop="hospitalBedNo"></el-table-column>
                <el-table-column label="宝宝姓名" align="center" prop="userName"></el-table-column>
                <el-table-column label="住院号" align="center" prop="inPatientNo"></el-table-column>
                <el-table-column label="联系电话" align="center" prop="phone" width="150"></el-table-column>
                <el-table-column label="设置备乳日期" align="center" prop="sendTime">
                    <template slot-scope="scope">
                        {{ scope.row.sendTime.indexOf(' ') > -1 ? scope.row.sendTime.split(' ')[0] : '' }}
                    </template>
                </el-table-column>
                <el-table-column label="通知内容" align="center" prop="milkMsg" width="200">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" :content="scope.row.milkMsg" placement="top">
                            <div style="font-size: 12px;">{{ scope.row.milkMsg && scope.row.milkMsg.length > 15 ? scope.row.milkMsg.substring(0, 15) + '...' : scope.row.milkMsg }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="通知日期" align="center" prop="recordTime" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.recordTime.indexOf(' ') > -1 ? scope.row.recordTime.split(' ')[0] : '' }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="200" align="center" prop="remark">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" :content="scope.row.remark" placement="top">
                            <div style="font-size: 12px;">{{ scope.row.remark.length > 10 ? scope.row.remark.substring(0, 10) + '...' : scope.row.remark }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="操作人"  width="100" align="center" prop="creater"></el-table-column>
            </el-tabel>
        </div>
        
        <div class="footer">
            <el-pagination
                background
                @current-change="handleChangePage"
                @size-change="handleSizeChange"
                :page-size="table.size"
                layout="prev, pager, next, total, sizes"
                :total="table.total">
        </div>

        <el-dialog
            title="备乳发送历史"
            :visible.sync="dialog.show"
            width="50%">
            <el-table :data="dialog.data" v-loading="dialog.loading" border element-loading-text="加载中...">
                <el-table-column label="患者" align="center" prop="userName"></el-table-column>
                <el-table-column label="设置备乳日期" align="center" prop="sendTime"></el-table-column>
                <el-table-column label="所需待备乳量(ml)" align="center" prop="milkQuantity"></el-table-column>
                <el-table-column label="备注" align="center" prop="remark"></el-table-column>
                <el-table-column label="发布人" align="center" prop="creater"></el-table-column>
            </el-table>
            <div style="text-align: right; margin-top: 15px;padding-right: 15px;">
                <el-pagination
                    background
                    @current-change="handleChangeDetailPage"
                    @size-change="handleSizeChange"
                    :page-size="dialog.size"
                    layout="prev, pager, next, total, sizes"
                    :total="dialog.total">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel" size="small">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
require(['bm/breastmilkSendHistory'], function ($event) {
    $event.init()
})
</script>
</html>